<template>
    <div class="home-right">
        <div class="container">
            <div class="card1 shadow-box">
                <table>
                    <tr>
                        <td><i class="fa fa-file-text-o fa-fw"></i></td>
                        <td> <i class="fa fa-edit fa-fw"></i></td>
                        <td> <i class="fa fa-lightbulb-o fa-fw"></i></td>
                    </tr>
                    <tr>
                        <td>写回答</td>
                        <td>写文章</td>
                        <td>写想法</td>
                    </tr>
                    <tr>
                        <td><i class="fa fa-video-camera fa-fw"></i></td>
                        <td> <i class="fa fa-history fa-fw"></i></td>
                        <td> <i class="fa fa-file  fa-fw"></i></td>
                    </tr>
                    <tr>
                        <td>发视频</td>
                        <td>稍后答</td>
                        <td>草稿箱</td>
                    </tr>
                </table>
            </div>
            <div class="card2 shadow-box">
                <div class="right1"><i class="fa fa-user-plus fa-fw"></i>创作者中心</div>
                <div class="right2">去开通<i class="fa fa-angle-right fa-fw"></i></div>
            </div>
            <div class="card3 shadow-box">
                <table>
                    <tr>
                        <td><i class="fa fa-bolt fa-fw" style="color: yellow;"></i></td>
                        <td><i class="fa fa-book fa-fw" style="color: green;"></i></td>
                        <td><i class="fa fa-yelp fa-fw" style="color: #0084ff;"></i></td>
                    </tr>
                    <tr>
                        <td>Live</td>
                        <td>书店</td>
                        <td>圆桌</td>
                    </tr>
                    <tr>
                        <td><i class="fa fa-pencil fa-fw"style="color: #0084ff;"></i></td>
                        <td><i class="fa fa-cny fa-fw"style="color: #0084ff;"></i></td>
                        <td><i class="fa fa-folder fa-fw"style="color: #0084ff;"></i></td>
                    </tr>
                    <tr>
                        <td>专栏</td>
                        <td>付费咨询</td>
                        <td>百科</td>
                    </tr>
                </table>
            </div>
            <div class="card4 card3 shadow-box" >
                <div class="row">
                    <div class="col-1"><i class="fa fa-star"></i></div>
                    <div class="col-2">我的收藏</div>
                    <div class="col-3"><span>0</span></div>
                </div>
                <div class="row">
                    <div class="col-1">	<svg class="grey-icon" viewBox="0 0 24 24" width="18" height="18">
                        <path
                                d="M5.74 4h12.52c.961 0 1.74.775 1.74 1.73V16.27c0 .955-.779 1.73-1.74 1.73h-3.825l-1.658 2.044a1 1 0 0 1-1.554 0l-1.658-2.044H5.74C4.78 18 4 17.224 4 16.27V5.73C4 4.775 4.778 4 5.74 4zM12 16a.976.976 0 0 0 .705-.287.951.951 0 0 0 .295-.712.954.954 0 0 0-.295-.714A.976.976 0 0 0 12 14a.962.962 0 0 0-.705.295A.961.961 0 0 0 11 15c0 .284.098.522.295.713A.975.975 0 0 0 12 16zm1.278-4.924a36.81 36.81 0 0 0 1.023-.975c.19-.193.354-.422.492-.688.138-.266.207-.575.207-.928 0-.448-.12-.864-.363-1.246a2.517 2.517 0 0 0-1.029-.906C13.164 6.111 12.652 6 12.072 6c-.624 0-1.17.133-1.638.399-.468.265-.824.6-1.068 1.005-.244.405-.366.804-.366 1.2 0 .19.077.368.231.531a.747.747 0 0 0 .567.246c.38 0 .638-.234.774-.703.144-.449.32-.788.528-1.019.208-.23.532-.345.972-.345.376 0 .683.114.921.342.238.229.357.51.357.841 0 .17-.039.328-.117.473a1.782 1.782 0 0 1-.288.396c-.114.118-.3.294-.555.526a9.71 9.71 0 0 0-.696.688c-.172.194-.31.418-.414.673a2.391 2.391 0 0 0-.156.906c0 .278.071.488.213.63a.716.716 0 0 0 .525.211c.4 0 .638-.216.714-.648.044-.203.077-.345.099-.426.022-.081.053-.162.093-.243.04-.081.101-.17.183-.268.082-.098.191-.21.327-.34z"
                                fill-rule="evenodd"
                        ></path>
                    </svg></div>
                    <div class="col-2">我关注的问题</div>
                    <div class="col-3"><span>0</span></div>
                </div>
                <div class="row">
                    <div class="col-1">	<svg class="grey-icon" viewBox="0 0 24 24" width="18" height="18">
                        <path
                                d="M4 10V8a1 1 0 1 1 2 0v2h2a1 1 0 0 1 0 2H6v2a1 1 0 0 1-2 0v-2H2a1 1 0 0 1 0-2h2zm10.455 2c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm-7 6c0-2.66 4.845-4 7.272-4C17.155 14 22 15.34 22 18v1.375c0 .345-.28.625-.625.625H8.08a.625.625 0 0 1-.625-.625V18z"
                                fill-rule="evenodd"
                        ></path>
                    </svg></div>
                    <div class="col-2">我的邀请</div>
                    <div class="col-3"><span>6</span></div>
                </div>
                <div class="row">
                    <div class="col-1">	<svg class="grey-icon" viewBox="0 0 24 24" width="18" height="18">
                        <path
                                d="M19 19.5H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10.5a2 2 0 0 1-2 2zm0-12a.5.5 0 0 0-.5-.5h-13a.5.5 0 0 0-.5.5v2a.5.5 0 0 0 .5.5h3.75c1 0 1 2 2.75 2s1.75-2 2.75-2h3.75a.5.5 0 0 0 .5-.5v-2z"
                                fill-rule="evenodd"
                        ></path>
                    </svg></div>
                    <div class="col-2">我的余额</div>
                    <div class="col-3"></div>
                </div>
                <div class="row">
                    <div class="col-1"><svg class="grey-icon" viewBox="0 0 24 24" width="18" height="18">
                        <path
                                d="M5.74 4h12.52c.961 0 1.74.775 1.74 1.73V16.27c0 .955-.779 1.73-1.74 1.73h-3.825l-1.658 2.044a1 1 0 0 1-1.554 0l-1.658-2.044H5.74C4.78 18 4 17.224 4 16.27V5.73C4 4.775 4.778 4 5.74 4zM7 8.98c0 .554.449.996 1.003.996h4.994A.992.992 0 0 0 14 8.981a.997.997 0 0 0-1.003-.995H8.003A.992.992 0 0 0 7 8.98zm0 4c0 .554.446.996.995.996h8.01a.993.993 0 0 0 .995-.995.993.993 0 0 0-.995-.995h-8.01A.993.993 0 0 0 7 12.98z"
                                fill-rule="evenodd"
                        ></path>
                    </svg></div>
                    <div class="col-2">站务中心</div>
                    <div class="col-3"></div>
                </div>
                <div class="row">
                    <div class="col-1">	<svg class="grey-icon" viewBox="0 0 24 24" width="18" height="18">
                        <path
                                d="M16.517 15.815a5.871 5.871 0 0 1-4.481 2.078 5.865 5.865 0 0 1-5.859-5.857 5.865 5.865 0 0 1 5.859-5.859c1.63 0 3.204.7 4.319 1.919.085.093.24.432.209.797a1.086 1.086 0 0 1-.436.779c-.248.193-.516.29-.797.29-.402 0-.7-.198-.814-.314A3.473 3.473 0 0 0 12 8.575a3.464 3.464 0 0 0-3.46 3.461 3.464 3.464 0 0 0 3.46 3.46 3.63 3.63 0 0 0 2.654-1.181c.136-.152.458-.306.806-.306.274 0 .542.095.773.274.35.269.45.588.473.809.032.308-.072.585-.188.723m4.686-7.699C20.67 6.883 19.96 5.82 19.07 4.929c-.891-.89-1.954-1.601-3.188-2.133A9.728 9.728 0 0 0 12 2a9.733 9.733 0 0 0-3.883.796c-1.234.532-2.297 1.243-3.186 2.133-.891.891-1.602 1.954-2.134 3.187A9.713 9.713 0 0 0 2 12a9.752 9.752 0 0 0 .797 3.883c.531 1.233 1.242 2.296 2.134 3.186.89.891 1.953 1.602 3.186 2.134A9.725 9.725 0 0 0 12 22a9.72 9.72 0 0 0 3.883-.797c1.233-.532 2.296-1.243 3.188-2.134.89-.89 1.601-1.953 2.132-3.186A9.73 9.73 0 0 0 22 12a9.69 9.69 0 0 0-.797-3.884"
                                fill-rule="evenodd"
                        ></path>
                    </svg></div>
                    <div class="col-2">版权服务中心 </div>
                    <div class="col-3"></div>
                </div>
            </div>
            <div class="card5 card4">
                <p>刘看山 · 知乎指南 · 知乎协议 · 知乎隐私保护指引</p>
                <p>应用 · 工作 · 申请开通知乎机构号<p/>
                <p>侵权举报 · 网上有害信息举报专区</p>
                <p>京ICP证 110745 号</p>
                <p>京ICP 备 13052560号 -1</p>
                <p style="position: relative"><span style="position:absolute;margin-top: 1px"><img src="https://pic3.zhimg.com/80/v2-d0289dc0a46fc5b15b3363ffa78cf6c7.png" style="width: 20px;height: 20px;"></span><span style="margin-left: 24px">京公网安备 11010802010035 号</span></p>
                <p>互联网药品信息服务资格证书</p>
                <p>(京) -非经营性 -2017 -0067</p>
                <p>违法和不良信息举报: 010-82716601</p>
                <p>儿童色情信息举报专区</p>
                <p>证照中心</p>
                <p style="fill: #8590a6; position: relative">联系我们<svg style="position: absolute; margin: 2px 5px;" viewBox="0 0 24 24" width="15" height="15">
                    <path
                            d="M16.517 15.815a5.871 5.871 0 0 1-4.481 2.078 5.865 5.865 0 0 1-5.859-5.857 5.865 5.865 0 0 1 5.859-5.859c1.63 0 3.204.7 4.319 1.919.085.093.24.432.209.797a1.086 1.086 0 0 1-.436.779c-.248.193-.516.29-.797.29-.402 0-.7-.198-.814-.314A3.473 3.473 0 0 0 12 8.575a3.464 3.464 0 0 0-3.46 3.461 3.464 3.464 0 0 0 3.46 3.46 3.63 3.63 0 0 0 2.654-1.181c.136-.152.458-.306.806-.306.274 0 .542.095.773.274.35.269.45.588.473.809.032.308-.072.585-.188.723m4.686-7.699C20.67 6.883 19.96 5.82 19.07 4.929c-.891-.89-1.954-1.601-3.188-2.133A9.728 9.728 0 0 0 12 2a9.733 9.733 0 0 0-3.883.796c-1.234.532-2.297 1.243-3.186 2.133-.891.891-1.602 1.954-2.134 3.187A9.713 9.713 0 0 0 2 12a9.752 9.752 0 0 0 .797 3.883c.531 1.233 1.242 2.296 2.134 3.186.89.891 1.953 1.602 3.186 2.134A9.725 9.725 0 0 0 12 22a9.72 9.72 0 0 0 3.883-.797c1.233-.532 2.296-1.243 3.188-2.134.89-.89 1.601-1.953 2.132-3.186A9.73 9.73 0 0 0 22 12a9.69 9.69 0 0 0-.797-3.884"

                    ></path>
                </svg> <span style="margin-left: 20px">2020 知乎</span></p>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "HomeRight"
    }
</script>

<style lang="scss" scoped>
    @import url("../assets/css/basic.css");
    @import url('../assets/css/font-awesome-4.7.0/css/font-awesome.min.css');
.home-right{
    margin: 26px -25%;
    min-width: 400px;
    min-height: 500px;


}
 .card1{
        width:100%;
        height: 160px;
        background:#fff;
        margin-top: 5px;
      table>tr>td{
              height: 35px;
      }
    }
.card2{
    width:100%;
    height: 50px;
    background:#fff;
    margin-top: 5px;
    display: flex;
    position: relative;
    .right1{
        color: #8590a6;;
        margin:15px 5%;
    };
    .right2{
        margin:15px 8%;
        color: #0084ff;
    };
    }
.card3{
    width:100%;
    height: 160px;
    background:#fff;
    margin-top: 5px;
    padding-bottom: 10px;
    table>tr>td{
        height: 30%;
        margin-bottom: 10px;
        color: #8590a6;;
    }

}
.card4{
    padding: 10px;
    height: 270px;
   .row{
       height: 30px;
       margin-top: 10px;
       fill: #8590a6;;
       color: #8590a6;;
       .col-1{
           flex: 0 0 10%;
       }
       .col-2{
           flex: 0 0 60%;
       }
       .col-3{
            flex: 0 0 30%;
            text-align: center;
           span{
               width: 30px;
               display: inline-block;
               height: 30px;
               line-height: 30px;
               background:#eee;
           }
       }
   }
}
.card5{
    width: 300px;
    font-size: 13px;
    color:  #8590a6;;
}
.shadow-box{
    width: 300px;
    box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2);
}
i{
    color: #8590a6;
}
table{
    width: 100%;
    height: 100%;
};
td{
    width: 33%;
    height: 33%;
    text-align: center;
}
</style>
